import React from 'react'
import { useTable } from 'react-table'

import makeData from './makeData';

import './style';


function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })

    // Render the UI for your table
    return (
        <table className="m-table" {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => {
                            console.log(column, "============column.getHeaderProps()=============");
                            return <th style={{ width: column.width + 'px' }} {...column.getHeaderProps()} > {column.render('Header')}</th>
                        })}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table >
    )
}

function App() {
    const columns = React.useMemo(
        () => [
            {
                Header: '会议主题',
                accessor: 'firstName',
            },
            {
                Header: 'Last Name',
                accessor: 'lastName',
            },
            {
                Header: 'Age',
                accessor: 'age',
            },
            {
                Header: 'Visits',
                accessor: 'visits',
            },
            {
                Header: 'Status',
                accessor: 'status',
                disableResizing: true, //宽度不能拖动
                width: 156,
                Cell: (values) => {
                    return "444"
                }
            }
        ],
        []
    )

    const data = React.useMemo(() => makeData(10), [])

    return (
        <Table columns={columns} data={data} />
    )
}

export default App